﻿@model Inovout.Kuajing.Models.Consigner
@{
    Layout = "~/Views/Shared/_Layout.cshtml"; 
}
@section styles {

    <style>
        .form form {
            margin: 20em auto;
        }

        div.error {
            padding-left: 16px;
            padding-bottom: 2px;
            font-weight: bold;
            color: #EA5200;
        }

        div.leftList, div.rightList {
            height: 600px;
            border: 2px solid gray;
            OVERFLOW: auto;
        }

        ul {
            height: 100%;
        }

        .selected {
            background-color: #326593;
        }

        div.buttonMiddle {
            height: 600px;
            padding-top: 150px;
        }

            div.buttonMiddle div {
                margin-top: 50px;
            }

        #itemsForm {
            text-align: center;
        }
    </style>
}

@section scriptsHead {
    <script>
        var page = {};
        page.addUrlList = function ($object, name, value) {
            var $li = $('<li data-value="' + value + '">' + name + '</li>');
            $li.on('click', function () {
                $object.find("li.selected").removeClass("selected");
                $(this).addClass("selected");
            })
            $object.append($li);
        }

        var savedProperties;
        $(document).ready(function () {
            var savedTemplate = '@Model.Template';
            savedProperties = savedTemplate.split(',');

            for (var i = 0; i < savedProperties.length; i++) {
                if (savedProperties[i]) {
                    page.addUrlList($('#ul_right'), "", savedProperties[i])
                }

            }

            $.ajax({
                type: "GET",
                url: '../../Files/Json/properies.js',
                dataType: "json",
                success: function (data) {
                    debugger;
                    var shipmentOrders = data.ShipmentOrder;
                    $.each(shipmentOrders, function (index, content) {
                        var contentValue = "ShipmentOrder." + content.value;
                        if (savedProperties.indexOf(contentValue) == -1) {
                            page.addUrlList($('#ul_left'), content.name, contentValue)
                        } else {
                            $('#ul_right').find("li").each(function (index, item) {
                                if ($(item).attr("data-value") == contentValue) {
                                    $(item).append(content.name)
                                }
                            })

                        }

                    })

                    var shipmentOrderItems = data.ShipmentOrderItem;
                    $.each(shipmentOrderItems, function (index, content) {
                        debugger;
                        var contentValue = "ShipmentOrderItem." + content.value;
                        if (savedProperties.indexOf(contentValue) == -1) {
                            page.addUrlList($('#ul_left'), content.name, contentValue)
                        } else {
                            //$('#ul_right').find("li[data-value=" + contentValue + "]").val(content.name);
                            $('#ul_right').find("li").each(function (index, item) {
                                if ($(item).attr("data-value") == contentValue) {
                                    $(item).append(content.name)
                                }
                            })
                        }

                    })

                    var commodities = data.Commodity;
                    $.each(commodities, function (index, content) {
                        debugger;
                        var contentValue = "Commodity." + content.value;
                        if (savedProperties.indexOf(contentValue) == -1) {
                            page.addUrlList($('#ul_left'), content.name, contentValue)
                        } else {
                            // page.addUrlList($('#ul_right'), content.name, contentValue)
                            $('#ul_right').find("li").each(function (index, item) {
                                if ($(item).attr("data-value") == contentValue) {
                                    $(item).append(content.name)
                                }
                            })
                        }

                    })


                    var consts = data.Const;
                    $.each(consts, function (index, content) {
                        var contentValue = "Const." + content.value;
                        if (savedProperties.indexOf(contentValue) == -1) {
                            page.addUrlList($('#ul_left'), content.name, contentValue)
                        } else {
                            // page.addUrlList($('#ul_right'), content.name, contentValue)
                            $('#ul_right').find("li").each(function (index, item) {
                                if ($(item).attr("data-value") == contentValue) {
                                    $(item).append(content.name)
                                }
                            })
                        }
                    })
                },
                complete: function (XMLHttpRequest, textStatus) {

                },
                erro: function (XMLHttpRequest, textStatus, errorThrown) {
                    debugger;
                    alert(2);
                }
            })

            $("#ul_left li").on('click', function () {
                $("#ul_left").find("li.selected").removeClass("selected");
                $(this).addClass("selected");
            })

            $("#ul_right li").on('click', function () {
                $("#ul_right").find("li.selected").removeClass("selected");
                $(this).addClass("selected");
            })



            $("#moveRight").on('click', function () {
                $("#ul_right").append($("#ul_left").find("li.selected").removeClass("selected"));
            })


            $("#moveLeft").on('click', function () {
                $("#ul_left").append($("#ul_right").find("li.selected").removeClass("selected"));
            })

            $("#save").on("click", function () {
                var headers = "";
                var template = "";
                $("#ul_right li").each(function (index, item) {
                    if (index == 0) {
                        template = $(item).attr("data-value");
                        headers = $(item).text();
                    } else {
                        template = template + "," + $(item).attr("data-value");
                        headers = headers + "," + $(item).text();
                    }
                })
                //template = template.substr(0, template.length - 1);
                $("#templateHeader").val(headers);
                $("#contentTemplate").val(template);

                var checked = $("#ckIsTab").is(":checked");
                $("#IsTab").val(checked);

                $("#itemsForm").submit();
            })
        });

    </script>

}

<div class="row">
    <div class="col-xs-4 leftList">
        <ul id="ul_left" class="list-unstyled">
        </ul>
    </div>
    <div class="col-xs-1">
    </div>
    <div class="col-xs-2 buttonMiddle">
        <div>
            <button type="button" id="moveRight" class="btn btn-primary btn-sm">&gt; &gt;</button>
        </div>
        <div>
            <button type="button" id="moveLeft" class="btn btn-primary btn-sm">&lt; &lt;</button>
        </div>

    </div>
    <div class="col-xs-1">
    </div>
    <div class="col-xs-4 rightList">
        <ul id="ul_right" class="list-unstyled">
        </ul>
    </div>
</div>
<form  id="itemsForm" class="form-group" action='@Url.Action("DownLoadOrderItems", "Order")' method="post">
    <div>
        @Html.HiddenFor(model => model.Id)
        @*  @Html.CheckBoxFor(model => model.IsTab)<span> </span>*@
    </div>
    <div class="checkbox">
        <label>
            <input type="checkbox" id="ckIsTab" checked="checked" name="ckIsTab">
            是否用Tab
        </label>
    </div>
    <input type="hidden" id="IsTab" name="IsTab" value="" />
    <div>
        @Html.HiddenFor(model => model.Template, new { @id = "contentTemplate" })
        <input type="hidden" id="templateHeader" name="templateHeader" />
    </div>
    <button type="submit" class="btn btn-default" id="save">提交</button>
    <a  href='@Url.Action("UnShippedOrderList", "Order")' class="btn btn-default" role="button">返回订单</a>
</form>

